<script type="text/x-template" id="videores">
    <div>
        <el-container>
            <el-header>
                <div style="padding: 10px;height: 50px">
                    <el-form :model="searchform"  label-width="100px" class="demo-ruleForm">
                        <el-row>
                            <el-col :span="7">
                                <el-form-item label="搜索项1" >
                                    <el-input v-model="searchform.item1" placeholder="请输入搜索项1"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="7">
                                <el-form-item label="搜索项2" >
                                    <el-input v-model="searchform.item2" placeholder="请输入搜索项2"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="7">
                                <el-form-item label="搜索项3" >
                                    <el-input v-model="searchform.item3" placeholder="请输入搜索项3"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="3">
                                <div align="center">
                                    <el-button type="primary" @click="searchclick">搜索</el-button>
                                </div>
                            </el-col>
                        </el-row>
                    </el-form>
                </div>
            </el-header>
            <el-container>
                <el-main>
                    <div>
                        <el-row>
                            <el-col :span="7" v-for="value in tableList">
                                <video :src="value.downloadUrl" width="300" height="400" type="video/mp4" controls></video>
                            </el-col>
                        </el-row>
                    </div>
                    <el-divider></el-divider>

                    <el-pagination
                            background
                            @current-change="handleCurrentChange"
                            :page-sizes="[10,50,100,150,200,250,300]"
                            :page-size="size"
                            layout="total,sizes,prev, pager, next,jumper"
                            :total="total">
                    </el-pagination>
                </el-main>
            </el-container>
        </el-container>

        <!-- 抽屉        -->
        <el-drawer title="我是标题" :visible.sync="share_drawer" :with-header="false">
            <span>这是抽屉</span>
        </el-drawer>

        <el-drawer title="我是标题" :visible.sync="share_drawer" :with-header="false">
            <div>
                <el-form :model="form" :rules="form_rules" ref="form" label-width="100px" class="demo-ruleForm">
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="名称" prop="name">
                                <el-input v-model="form.name"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="下拉" prop="select">
                                <el-select v-model="form.select" placeholder="请选择下拉" disabled>
                                    <el-option label="一" value="1"></el-option>
                                    <el-option label="二" value="2"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="下拉" prop="select">
                                <el-select v-model="form.select" placeholder="请选择下拉">
                                    <el-option
                                            v-for="item in selectList"
                                            :key="item.id"
                                            :label="item.name"
                                            :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <div v-if="form.select==1">
                            <el-col :span="24">
                                <el-form-item label="名称" prop="name">
                                    <el-input v-model="form.name"></el-input>
                                </el-form-item>
                            </el-col>
                        </div>
                    </el-row>
                </el-form>

                <div class="demo-drawer__footer">
                    <el-button @click="cancelForm">取 消</el-button>
                    <el-button type="primary" @click="$refs.share_drawer.closeDrawer()" :loading="loading">{{ loading ? '提交中 ...' : '确 定' }}</el-button>
                </div>
            </div>
        </el-drawer>



        <!-- 添加面板        -->
        <el-dialog title="添加面板" :visible.sync="dialogFormVisible_add">

            <el-form :model="form" :rules="form_rules" ref="form" label-width="100px" class="demo-ruleForm">
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="名称" prop="name">
                            <el-input v-model="form.name"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible_add = false">取 消</el-button>
                <el-button type="primary" @click="submit_add('form')">确 定</el-button>
            </div>
        </el-dialog>

        <!-- 编辑面板        -->
        <el-dialog title="编辑面板" :visible.sync="dialogFormVisible_update">

            <el-form :model="form" :rules="form_rules" ref="form" label-width="100px" class="demo-ruleForm">
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="活动名称" prop="name">
                            <el-input v-model="form.name"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible_update = false">取 消</el-button>
                <el-button type="primary" @click="submit_update('form')">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</script>
<script>
    let videores={
        data() {
            return {
                selectList:[], //下拉数据
                form:{}, //表单数据
                form_rules: {
                    name: [
                        {required: true, message: '请输入活动名称', trigger: 'blur'},
                        {min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur'}
                    ],
                    select:[
                        { required: true, message: '请选择下拉', trigger: 'change' }
                    ]
                }, // 表单校验
                share_drawer:false,//抽屉
                dialogFormVisible_add:false, //添加面板
                dialogFormVisible_update:false, //编辑面板
                activeIndex2: '1', //导航默认选中
                searchform:{

                },
                tableList:[], //表格数据
                total:0, // 条数
                size:10,
                multipleSelection:[] ,//多选
                cancelForm() {
                    this.loading = false;
                    this.dialog = false;
                    clearTimeout(this.timer);
                },
                loading: false,
                pageNum:1,
            }
        },
        created(){
            this.getlist(this.pageNum)
        },
        template: '#videores',
        methods: {
            //行点击
            row_click(row, column, event){

            },
            //搜索点击
            searchclick(){
                this.getlist(1);
            },
            //分页点击
            handleCurrentChange(val){
                this.pageNum=val;
                this.getlist(this.pageNum);
            },
            //打开更新
            update(val){
                this.form=val;
                this.dialogFormVisible_update=true;
            },
            //确认更新
            submit_update(formName){
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        api.POST('/update',this.form,(result)=>{
                            if(result.code===0){
                                this.$message({
                                    showClose: true,
                                    message: result.msg,
                                    type: 'success'
                                });
                                this.form={};
                                this.dialogFormVisible_update=false;
                            }else{
                                this.$message.error(result.msg);
                            }
                        })
                    } else {
                        return false;
                    }
                });
            },
            //添加
            add(){
                this.dialogFormVisible_add=true;
            },
            //添加确定
            submit_add(formName){
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        api.POST('/add',this.form,(result)=>{
                            if(result.code===0){
                                this.$message({
                                    showClose: true,
                                    message: result.msg,
                                    type: 'success'
                                });
                                this.form={};
                            }else{
                                this.$message.error(result.msg);
                            }
                        })
                        this.dialogFormVisible_add=false;
                    } else {
                        return false;
                    }
                });
            },
            //删除
            deleteData(val){
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    api.POST('/deleteurl',{'id':val},(result)=> {
                        if(result.code===0){
                            this.$message({
                                showClose: true,
                                message: '删除成功',
                                type: 'success'
                            });
                            this.getlist(this.pageNum);
                        }else{
                            this.$message.error(result.msg);
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            getlist(val){
                this.searchform.pageNum=val;
                this.searchform.pageSize=this.size;
                api.GET('/mfile/getvideores',this.searchform,(res)=>{
                    if(res.code===0){
                        this.tableList=res.data.records;
                        this.total=res.data.total;
                    }
                })
            },
            //多选
            handleSelectionChange(val){
                this.multipleSelection = val;
            },
            locationfref(href){
                window.open(href);
            },
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            },

        }
    }
    Vue.component('videores',videores);
</script>